<script setup lang="ts">
import ItemStyle from '@/components/ItemStyle/index.vue'
import type { Props } from './utils/types'
import type { Module } from '@/api/common/types'

const $route = useRoute()

const $props = defineProps<Props>()

const list = ref<Module[]>([])

watch(() => $props.goods, (data) => {
    list.value = data
}, { immediate: true })

const type = computed(() => {
    if ($props.showType == "shop") {
        return 2
    } else if ($props.showType == "default") {
        return 2
    } else if ($props.showType == "album") {
        return 3
    }
    return 1
})

const $router = useRouter()

function onClickBtn(id: number) {
    window.open($router.resolve(`/video-gather/${id}`).href, '_blank')
}

function onClickPractice(id: number) {
    window.open($router.resolve(`/video-details/${id}?categoryType=${($route.name as string)}`).href, '_blank')
}

</script>

<template>
    <div>
        <el-empty class="empty" description="暂无内容" v-if="list.length == 0" :image-size="82" />
        <div class="content">
            <ItemStyle v-for="item in list" :key="item.id" :type="type" :title="item.title" :image="item.image"
                :item="item" @on-click-btn="onClickBtn(item.id)" @on-click-practice="onClickPractice(item.id)" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 33px 20px;

    .empty {
        margin: 0 auto;
    }
}
</style>
